<script lang="ts" setup>
import { computed, onMounted, reactive, ref, watch } from 'vue';
import type { pointForm, pointRelation, questionForm } from '@/api/type';
import { usePointStore } from '@/stores/point';

// 从路由拿的，只是名字是cid，实际上拿的是知识点id
const props = defineProps(['cid']);
// 这个页面的知识点数据
const thispoint = ref<pointForm>({});
const allPoints: pointForm[] = usePointStore().pointDate
for (let i = 0; i < allPoints.length; i++) {
    if (allPoints[i].id == props.cid) {
        thispoint.value = allPoints[i];
        break;
    }
}
// 获取关联知识点及关联程度
let newRelations = ref<pointRelation[]>([])
const getRelationship = async () => {
    try {
        const res = await getRelation(props.cid);
        let relations: pointRelation[] = res.data;
        console.log("point:id", relations);
        // 过滤相关知识点数据
        newRelations.value = relations.map(relation => {
            let temp: pointRelation = relation;
            // temp.correlationStrength = relation.correlationStrength as number + 2
            // 根据 point2Id 查找对应的知识点名称
            const relatedPoint = allPoints.find(point => point.id === relation.point2Id);
            temp.point2name = relatedPoint ? relatedPoint.name : '';
            // 返回新的关系对象
            return temp;
        });

        console.log("查过之后", newRelations);
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}

import { ElMessage, ElMessageBox } from 'element-plus';
import { addRelation, getQuestionByPoint, getRelation, updateCorrelationStrength } from '@/api/point';
// 右边列表
const showDate = ref<number>(0);//切换列表
const questions = ref<questionForm[]>([])
// 根据知识点获取对应习题集
const getQuestions = async () => {
    let res = await getQuestionByPoint(props.cid);
    questions.value = res.data
}
function onDelete() {
    ElMessage("删除")
}
// 修改关联关系
async function changeRelation() {
    ElMessageBox.confirm(`确认修改吗？`)
        .then(async () => {
            let res = await updateCorrelationStrength(newRelations.value)
            ElMessage.success("修改成功")
            window.location.reload();
        })
        .catch(() => {
            console.error();
        })
}
// 新建关联关系
const value = ref<pointRelation>({
    point1Id: Number(props.cid)
})
const addData = () => {
    dialogVisible.value = true
}

// 过滤掉已存在关联关系的知识点
const filteredPoints = allPoints.filter(point => {
    // 检查该知识点是否已存在关联关系
    return !newRelations.value.some(relation => relation.point2Id === point.id) && point.id !== thispoint.value.id;
});

// 控制对话框弹出
const dialogVisible = ref(false)
const confirmTransfer = () => {
    ElMessageBox.confirm(`确认提交吗？`)
        .then(async () => {
            console.log("value====", value.value);
            let result = await addRelation(value.value);
            ElMessage.success(result.data)
            dialogVisible.value = false
            window.location.reload();
        })
        .catch(() => {
            console.error();
        })

    //关闭对话框
}

onMounted(() => {
    getRelationship();
    getQuestions();
})
</script>
<template>
    <el-card shadow="always" style="margin: 30px 20px;height: 80vh;">
        <el-row>
            <el-col :span="12" class="left-box">
                <!-- 左边大盒子 -->
                <el-row>
                    <el-col class="left-card-box">
                        <!-- 左边大盒子中的上小盒子 -->
                        <el-card class="card-box">
                            <p style="font-size: 16px;font-weight: bold;">{{ thispoint.name }}</p>
                            <p class="point-introduction">{{ thispoint.introduction }}</p>
                        </el-card>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 20px;">
                    <el-col class="left-card-box">
                        <!-- 左边大盒子中的下小盒子 -->
                        <el-card style="width: 60%;">
                            <el-button @click="changeRelation" style="margin-bottom: 10px">修改知识点关联关系</el-button>
                            <el-button @click="addData" type="primary" style="margin-bottom: 10px">新增关联关系</el-button>
                            <el-scrollbar height="250px">
                                <el-table :data="newRelations">
                                    <el-table-column label="知识点" property="point2name" />
                                    <el-table-column label="关联性">
                                        <template v-slot="{ row }">
                                            <el-rate v-model="row.correlationStrength" :texts="['弱相关', '较强相关', '强相关']"
                                                show-text clearable :max="3" />
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-scrollbar>
                        </el-card>
                    </el-col>
                </el-row>

            </el-col>
            <el-col :span="12">
                <!-- 右边大盒子 -->
                <h4 style="margin-left: 30px;margin-top: 20px;">相关习题展示</h4>
                <el-divider>
                    <el-icon><star-filled /></el-icon>
                </el-divider>
                <el-scrollbar max-height="500px" style="margin-top: 20px;">
                    <el-table ref="multipleTableRef" :data="questions">
                        <el-table-column type="selection" width="55" />
                        <el-table-column label="题目" property="content">
                        </el-table-column>
                    </el-table>
                </el-scrollbar>
            </el-col>
        </el-row>
    </el-card>

    <el-dialog title="选择关联关系" v-model="dialogVisible" draggable width="500">
        <el-select v-model="value.point2Id" placeholder="Select"
            style="width: 100px;margin-left: 10px;margin-right: 10px;">
            <el-option v-for="item in filteredPoints" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
        <el-rate v-model="value.correlationStrength" :texts="['弱相关', '较强相关', '强相关']" show-text clearable :max="3" />
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmTransfer">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style scoped>
.left-card-box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;

    .card-box {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 50%;
        background-color: #d3dce6;
        /* 让容器撑满父元素 */
    }
}

/* 右边父盒子 */
.center {
    display: flex;
    align-items: center;
    justify-content: center;
    /* height: 50px;
    margin: 10px; */
    text-align: center;
    border-radius: 4px;
    /* background: var(--el-color-primary-light-9);
    color: var(--el-color-primary); */
}
</style>
